<template>
	<view class="container">
		<view class="partner_box1" v-if="type">
			<view class="box1_box1" @click="type=1">我的订购清单</view>
			<view class="box1_box1" @click="type=2">订购清单列表</view>
			<view class="box1_box2 goldBg" :style="type==1?'left:0;':'left:325upx;'"></view>
		</view>
		<view class="mainBoxItem" v-if="type==1" v-for="(item,value) in buyList" :key="value">
			<!-- <image :src="require('@/static/type'+item.reportType+'.png')" class="itempic" mode="widthFix"></image> -->
			<view class="itemRightBox">
				<view class="reportTit" style="display: flex;align-items: center;justify-content: space-between;">
					{{item.title}}
					<text
						:style="item.status==0?'background: #E7EFFF;color: #2563EB;':item.status==1?'background: #FFF6DF;color: #FFC53E;':item.status==2?'background: #FFDCDB;color: #F15651;':'background: #FFDCDB;color: #F15651;'">{{item.status==0?'待审核':item.status==1?'已审核':item.status==2?'已驳回':'其他'}}</text>
				</view>
				
				<view class="remark">
					{{item.remark||'无'}}
				</view>
				<view class="remark" @click.stop="seeFn(item.fileUrl)" style="text-align: right;">
					查看附件
				</view>
				<view class="timeBox">
					<!-- <image src="@/static/watch.png" mode="widthFix"></image>
					<view class="numBox">{{item.lookNum?item.lookNum:0}}</view>
					<image src="@/static/down.png" mode="widthFix"></image> -->
					<view class="numBox" v-if="item.status==2">驳回理由：
						<text
							style="color: #F15651;font-weight: bold;font-size: 30rpx;">{{item.reason?item.reason:''}}</text>
					</view>
					<view class="numBox" v-if="item.status==1">佣金：
						<text
							style="color: #F15651;font-weight: bold;font-size: 30rpx;">￥{{item.commissionAmount?item.commissionAmount:0}}</text>
					</view>
					<view class="time">{{item.updateTime}}</view>
				</view>
				<!-- <view class="btnsBox">
					<view class="btnBox" @click.stop="getFPFn(item,1)">开发票</view>

				</view> -->
			</view>
		</view>
		<template v-if="type==1">
			<view class="bntLay">
				<view class="bnt" @click="getFPFn">
					<!-- uploadFileFn"> -->
					上传文件
				</view>
				<!-- <view class="bnt bnt2">
					下载模板
				</view> -->
			</view>
		</template>
		<view class="mainBoxItem" v-if="type==2" v-for="(item,value) in addList" :key="value">
			<!-- <image :src="require('@/static/type'+item.type+'.png')" class="itempic" mode="widthFix"></image> -->
			<view class="itemRightBox">
				<view class="reportTit">
					{{item.title}}
					<text
						:style="item.type==0?'background: #E7EFFF;color: #2563EB;':item.type==1?'background: #FFF6DF;color: #FFC53E;':item.type==2?'background: #DFFDF1;color: #0DC77A;':item.type==3?'background: #F1ECFF;color: #845CF8;':'background: #FFDCDB;color: #F15651;'">{{item.type==0?'一次性报告':item.type==1?'日报':item.type==2?'周报':item.type==3?'月报':'其他'}}</text>
				</view>
				<view class="remark">
					{{item.remark||''}}
				</view>
				<view class="timeBox">
					<!-- <image src="@/static/watch.png" mode="widthFix"></image>
					<view class="numBox">{{item.lookNum}}</view>
					<image src="@/static/down.png" mode="widthFix"></image>
					<view class="numBox">{{item.downloadNum}}</view> -->
					<view class="time">{{item.updateTime}}</view>
				</view>
				<view class="btnsBox">
					<view class="btnBox" @click.stop="seeFn(item.fileUrl)">下载模板</view>

				</view>
			</view>
		</view>

		<view class="coverBox" v-if="fpVisible">
			<view class="coverMainBox">
				<view class="header"
					style="border: none;font-size: 34rpx;justify-content: center;font-weight: bold;height: 120rpx;">
					<view>订购清单</view>
				</view>
				<scroll-view scroll-y="true" style="height: 70vh;">
					<view class="header" style="border: none;font-size: 34rpx;">
						<view>标题</view>
					</view>
					<view class="password" style="width: 640rpx;margin-top: 8rpx;">
						<input class="psdInput" type="text" v-model="fpObj.title">
					</view>
					<view class="header" style="border: none;font-size: 34rpx;">
						<view>备注</view>
					</view>
					<view class="password" style="width: 640rpx;height: auto; margin-top: 8rpx;">
						<textarea maxlength="-1"  v-model="fpObj.remark" />
					</view>
					<view class="header" style="border: none;font-size: 34rpx;">
						<view>文件上传</view>
					</view>
					<view class="" style="width: 640rpx;margin-top: 8rpx;">
						<view class="uploadItem" @click="uploadFileFn">
							<uni-icons type="plusempty" size="40" v-if="!fpObj.fileUrl"></uni-icons>
							<view class="" v-else>
								上传成功
							</view>
						</view>
					</view>


				</scroll-view>
				<view class="btnView" style="border: none;">
					<view class="btn1" @click="fpVisible=false">取消</view>
					<view class="btn2" @click="openFPFn">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				addList: [],
				buyList: [],
				type: 1,
				chooseItem: {},
				fpVisible: false,
				fpType: 0,
				fpObj: {
					title: '',
					remark: '',
				fileUrl:''
				},
				array: ['请选择', '个人', '企业'],
				index: 0,
			}
		},
		onLoad(e) {

		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getListFn()
		},
		methods: {
			getListFn() {
				// 用户订购清单管理-分页列表查询
				this.$http('/api/userOrderInventory/list', {
					pageNo: 1,
					pageSize: 999
				}).then(res => {
					this.buyList = res.result.records
				})
				// 订购清单管理-分页列表查询
				this.$http('/api/orderInventory/list', {
					pageNo: 1,
					pageSize: 999
				}).then(res => {
					this.addList = res.result.records
				})

			},
			toDetailFn(item) {
				if (this.type == 1) {
					if (item.reportType == 0) {
						uni.navigateTo({
							url: '/pages/space/detail?isMyself=true&id=' + item.reportId
						})
					} else {
						uni.navigateTo({
							url: '/pages/space/reportList?isMyself=true&id=' + item.reportId
						})
					}
				} else {
					if (item.type == 0) {
						uni.navigateTo({
							url: '/pages/space/detail?isMyself=true&id=' + item.id
						})
					} else {
						uni.navigateTo({
							url: '/pages/space/reportList?isMyself=true&id=' + item.id
						})
					}
				}
			},
			getFPFn() {
				this.fpObj = {
					title: '',
					remark: '',
					fileUrl:''
				};
				
				this.fpVisible = true
			},
			openFPFn() {
				if (!this.fpObj.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if (!this.fpObj.remark) {
					uni.showToast({
						title: '请输入备注',
						icon: 'none'
					})
					return
				}
				
				if (!this.fpObj.fileUrl) {
					uni.showToast({
						title: '请上传文件',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					mask: true
				})
				this.userOrderInventoryUpload();
				return
				this.$http('/api/invoice/apply', {
					taxId: this.fpObj.taxId,
					invoiceTitle: this.fpObj.invoiceTitle,
					email: this.fpObj.email,
					phone: this.fpObj.phone,
					// orderType: this.fpType,
					type: this.fpObj.type,
					id: this.chooseItem.id,
					orderNo: this.chooseItem.orderNo
					// orderNoList: [this.chooseItem.orderNo]
				}, 'POST').then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						})
						this.fpVisible = false
						uni.navigateTo({
							url: '/pages/my/fpList'
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			// 文件下载并打开
			seeFn(fileUrl) {
				let that = this;
				uni.downloadFile({
					url: fileUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						// that.addDownloadNum();
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			uploadFileFn() {
				let that = this;
				uni.chooseFile({
					count: 1,
					success: async (res) => {
						uni.uploadFile({
							url: this.$baseUrl + '/api/userUpload',
							filePath: res.tempFilePaths[0],
							header: {
								Authorization: 'Bearer ' + uni.getStorageSync('token')
							},
							name: 'file',
							success: (res1) => {
								this.fpObj.fileUrl = JSON.parse(res1.data).result
							}
						});

					}
				});
			},
			// 用户订购清单管理-上传清单
			userOrderInventoryUpload(fileUrl) {
				this.$http('/api/userOrderInventory/upload', {
					
					...this.fpObj
				}, 'POST', true).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: '上传成功',
							icon: 'none'
						})
						this.fpVisible = false
						this.getListFn()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		padding-top: 32rpx;
		padding-bottom: 150rpx;

		.partner_box1 {
			width: 650rpx;
			height: 82upx;
			background: #F7F7F7;
			border-radius: 50upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin: 0 auto 32rpx;

			.box1_box1 {
				width: 325upx;
				height: 82upx;
				background: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				color: #000000;
				z-index: 2;
				font-weight: bold;
			}

			.box1_box2 {
				width: 325upx;
				height: 82upx;
				border-radius: 50upx;
				position: absolute;
				top: 0;
				z-index: 0;
				transition: all 0.6s;
			}
		}

		.mainBoxItem {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 28rpx;
			margin-bottom: 16rpx;
			display: flex;

			.itempic {
				width: 120rpx;
				min-width: 120rpx;
				height: 0;
				margin-right: 28rpx;
			}

			.itemRightBox {
				width: 100%;
				padding-top: 10rpx;

				.reportTit {
					font-size: 28rpx;
					color: #1F2937;
					font-weight: bold;
					padding-bottom: 56rpx;
					line-height: 28rpx;
					min-height: 56rpx;

					text {
						font-size: 16rpx;
						padding: 4rpx 10rpx;
						font-weight: normal;
						border-radius: 6rpx;
						margin-left: 16rpx;
					}
				}

				.remark {
					color: #333;
					font-size: 30upx;
					margin-bottom: 30upx;
					line-height: 1.5;
				}

				.timeBox {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 24rpx;
					color: #9CA3AF;

					image {
						width: 26rpx;
						height: 0;
					}

					.numBox {
						max-width: 60%;
						margin: 0 26rpx 0 10rpx;
					}

					.time {
						margin-left: auto;
					}
				}

				.btnsBox {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 70rpx;
					margin-top: 20upx;

					.btnBox {
						height: 64rpx;
						background: #FFBF08;
						border-radius: 40rpx;
						font-size: 30rpx;
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 20rpx;
						padding: 0 40rpx;
					}

					.btnBox1 {
						width: 136rpx;
						height: 64rpx;
						border: 2rpx solid #FFBF08;
						border-radius: 40rpx;
						font-size: 30rpx;
						color: #FFBF08;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.coverBox {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;

		.coverMainBox {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 0 30rpx;

			.header {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #000000;
				border-bottom: 1rpx solid #eaeaea;
				width: 100%;
			}

			.password {
				width: 600rpx;
				height: 90rpx;
				background: #F6F7FB;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				color: #000000;
				font-weight: bold;
				margin: 30rpx 0 8rpx 0;

			}

			.uploadItem {
				width: 200upx;
				height: 200upx;
				border: 2upx solid #eee;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.psdInput {
				width: 532rpx;
				height: 90rpx;
				text-align: center;
			}

			.itemBox {
				width: 100%;
				height: 228rpx;
				background: #FFFFFF;
				border-bottom: 2rpx solid #F3F4F6;
				position: relative;

				.logo {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					position: absolute;
					top: 32rpx;
					left: 32rpx;
				}

				.phone {
					width: 52rpx;
					height: 52rpx;
					position: absolute;
					top: 20rpx;
					right: 16rpx;
					z-index: 1;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					width: 460rpx;
					height: 32rpx;
					position: absolute;
					top: 32rpx;
					left: 216rpx;
					font-weight: bold;
				}

				.addressPic {
					width: 22rpx;
					height: 28rpx;
					position: absolute;
					top: 88rpx;
					left: 216rpx;
				}

				.address {
					width: 388rpx;
					// height: 72rpx;
					font-size: 28rpx;
					color: #6B7280;
					position: absolute;
					top: 82rpx;
					left: 244rpx;
					overflow: hidden;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.navs {
					width: 388rpx;
					height: 32rpx;
					position: absolute;
					top: 166rpx;
					left: 216rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.navItem {
						height: 32rpx;
						background: #FFBE06;
						border-radius: 5rpx;
						padding: 0 12rpx;
						line-height: 32rpx;
						font-size: 20rpx;
						color: #3D3D3D;
						margin-right: 14rpx;
					}
				}
			}

			.btnView {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 160rpx;
				border-top: 2rpx solid #F3F4F6;

				.btn1 {
					width: 206rpx;
					height: 78rpx;
					background: #F6F7FC;
					border-radius: 40rpx;
					border: 1rpx solid #E8E8E8;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #252E37;
				}

				.btn2 {
					width: 206rpx;
					height: 78rpx;
					background: #FFBE06;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #000000;
					margin-left: 28rpx;
				}
			}
		}
	}

	.bntLay {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		// height: 96rpx;
		background-color: #FFFFFF;
		padding: 20upx 30upx;

		.bnt {
			width: 100%; //45%;
			height: 96rpx;
			background: #2563EB;
			border-radius: 506rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			color: #FFFFFF;

		}

		.bnt2 {
			background: #fff;
			color: #2563EB;
			border: 2upx solid #2563EB;
		}
	}
</style>